// components/lyric/lyric.js

//当前歌词的高度初始化为0
let lyricHeight = 0

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isLyricShow:{
      type:Boolean,
      value:false,
    },
    lyric:String
  },

  //获取到歌词但是要解析出来，就需要使用数据监听器
  observers:{
    lyric(lrc) {
      // console.log(lrc)

      //此处要判断一下，有些音乐是没有歌词，不能点进去之后空白，至少有一个提示，之前设置了暂无歌词，那么进行调用
      if (lrc == '暂无歌词') {
        this.setData({
          lrcList:[
            {
              lrc,
              time:0,
            }
          ],
          nowLyricIndex:-1
        })
      }else{
        this._parseLyric(lrc)
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    lrcList:[],  //歌词数组
    nowLyricIndex:0,  //当前选中的歌词的索引
    scrollTop:0,  //代表滚动条滚动的高度
  },

  //生命函数存储位置
  lifetimes:{
    //声明一个生命周期函数，组件再页面上完成布局以后进行调用执行
    //再这里主要进行rpx和px之间的转换，因为不同设备尺寸不同
    ready(){
      //wx.getSystemInfo能获取到手机的信息
      wx.getSystemInfo({
        success(res) {
          // console.log(res)
          //求出1rpx的大小,能够求出一行歌词再屏幕的宽度
          lyricHeight = res.screenWidth / 750 * 64
        },
      })
    }
  },


  /**
   * 组件的方法列表
   */
  methods: {
    //此方法是再player传递过来
    update(currentTime){
      // console.log(currentTime)
      //先把歌词数组先存储起来，方便调用
      let lrcList = this.data.lrcList
      //判断当前存储数组的长度，如果0是没有歌词，直接返回出去，如果不等于0，有歌词的话需要循环
      if (lrcList.length == 0) {
        return
      }

      //此处有一个bug，就是有的歌词结束了，但是音乐并没有结束，那么歌词永远再之前的位置上，那么还需要进行判断
      //判断，如果当前的播放时间大于最后播放的歌词,那么就让歌词的索引等于-1
      if (currentTime > lrcList[lrcList.length - 1].time) {
        //如果不等-1，也就是不是最后的歌词，那么直接改变成最后一句的歌词
        if (this.data.nowLyricIndex != -1) {
          this.setData({
            nowLyricIndex:-1,
            scrollTop: lyric.length * lyricHeight
          })
        }
      }

      for (let i = 0, len = lrcList.length; i < len; i++) {
        //判断，如果当前播放的时间与lrcList【i】对象中的time是否小于等于，条件成立进行高亮显示
        if (currentTime <= lrcList[i].time) {
          this.setData({
            nowLyricIndex: i - 1,  //i- 1 是因为currentTime不能大于当前播放时间的进度，用-1来进行保持上一层
            //把转换之后的值直接赋予滚动的高度
            scrollTop: (i - 1) * lyricHeight
          })
          //已经进行了高亮显示，就不需要一直循环了，直接结束掉
          break
        }
      }
    },
    //解析歌词，参数为传入得歌词得字符串
    _parseLyric(sLyric){
      //把传入过来得歌词进行拆分，拆分成一行，用换行来进行拆分，这样每一行都对应相应的数据
      let line = sLyric.split('\n')
      //需要要把当前的歌词信息渲染到页面上，应该把对应的歌词进行存储
      let _lrcList = []
      //通过循环来得到每一行的数据，之后通过正则表达式来进行匹配对象的字符串
      line.forEach((elem) => {
        let time = elem.match(/\[(\d{2,}):(\d{2})(?:\.(\d{2,3}))?]/g)
        //判断，如果当前的时间不为空的话，那么需要匹配到之前时间所对应的歌词
        if (time != null) {
          //还是进行拆分，因为前面是时间，后面是时间所对应的歌词，那么需要把歌词拆分出来，放到数组中，之后再次循环歌词数组
          let lrc = elem.split(time)[1]
          //还是要使用正则去进行匹配，匹配的是时间对应的歌词，但是需要把时间转换为秒数，这样才能与之前的时间格式化所对应
          let timeReg = time[0].match(/(\d{2,}):(\d{2})(?:\.(\d{2,3}))?/)
          //把时间转化为秒
          let time2Seconds = parseInt(timeReg[1]) * 60 + parseInt(timeReg[2]) + parseInt(timeReg[3]) / 1000
          //再每次循环的时候，将信息存储到_lrcList数组中
          _lrcList.push({
            lrc,  //歌词
            time: time2Seconds  //转换的时间秒数
          })
        }
      })
      this.setData({
        lrcList: _lrcList
      })
    }
  }
})
